<template>
  <div style="padding:20px;width:100%">
    <div class="clearfix">
      <div class="fl c-flex c-a-c mr10 mb15">
        <div class="mr10">订单时间</div>
        <el-date-picker
          v-model="time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
        ></el-date-picker>
      </div>
      <div class="fl c-flex c-a-c mr10 mb15">
        <div class="mr10">商品名称</div>
        <el-input class="c-box-flex" placeholder="请输入商品名称" v-model="gameNameId" clearable></el-input>
      </div>
      <div class="fl c-flex c-a-c mr10 mb15">
        <div class="mr10">用户账号</div>
        <el-input class="c-box-flex" placeholder="请输入用户账号" v-model="userAccount" clearable></el-input>
      </div>
      <div class="fl c-flex c-a-c mr10 mb15">
        <div class="mr10">支付方式</div>
        <el-select v-model="paymentWay" placeholder="请选择" class="c-box-flex" clearable>
          <el-option label="微信" value="0"></el-option>
          <el-option label="支付宝" value="1"></el-option>
        </el-select>
      </div>
      <div class="fl c-flex c-a-c mr10 mb15">
        <div class="mr10">渠道</div>
        <el-select v-model="channelId" placeholder="请选择" class="c-box-flex" clearable>
          <el-option :label="obj.name" :value="obj.id" v-for="obj in channelList" :key="obj.id"></el-option>
        </el-select>
      </div>
      <div class="fl c-flex c-a-c mr10 mb15">
        <div class="mr10">供应商</div>
        <el-select v-model="supplierId" placeholder="请选择" class="c-box-flex" clearable>
          <el-option :label="obj.name" :value="obj.id" v-for="obj in supplierList" :key="obj.id"></el-option>
        </el-select>
      </div>
      <div class="fl c-flex c-a-c mr10 mb15">
        <div class="mr10">状态</div>
        <el-select v-model="orderState" placeholder="请选择" class="c-box-flex" clearable>
          <el-option :label="obj.name" :value="obj.id" v-for="obj in orderStateList" :key="obj.id"></el-option>
        </el-select>
      </div>
    </div>
    <div class="c-flex">
      <div>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>
    <div ref="table" class="mt15">
      <el-table :data="List" style="width: 100%" :max-height="maxHeight" border>
        <el-table-column prop="orderNumber" label="订单编号" width="220"></el-table-column>
        <el-table-column prop="createTime" label="订单时间" width="220">
          <template slot-scope="scope">
            <div>{{$format(scope.row.createTime)}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="goodsName" label="商品名称" width="150"></el-table-column>
        <el-table-column prop="goodsNum" label="数量" width="100"></el-table-column>
        <el-table-column prop="orderPrice" label="订单金额(元)" width="150"></el-table-column>
        <el-table-column prop="memberType" label="会员类型" width="150"></el-table-column>
        <el-table-column prop="discountWay" label="优惠方式" width="150">
          <template slot-scope="scope">
            <div>{{discountWayList[scope.row.discountWay]?discountWayList[scope.row.discountWay]:'-'}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="discountPrice" label="优惠金额(元)" width="150">
          <template slot-scope="scope">
            <div>{{scope.row.discountPrice?scope.row.discountPrice:0}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="actualPrice" label="实付金额(元)" width="150"></el-table-column>
        <el-table-column prop="paymentWay" label="付款方式" width="150">
          <template slot-scope="scope">
            <div>{{scope.row.paymentWay?'支付宝':'微信'}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="channelId" label="渠道" width="100">
          <template slot-scope="scope">
            <div>{{scope.row.cName}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="sName" label="供应商" width="150">
          <template slot-scope="scope">
            <div @click="setId(scope.row.id)" class="blue cursor">{{scope.row.sName}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="userAccount" label="用户账号" width="150"></el-table-column>
        <el-table-column prop="returnTime" label="订单状态">
          <template slot-scope="scope">
            <div v-for="obj in orderStateList" :key="obj.id">
              <span v-if="scope.row.orderState==obj.id">{{obj.name}}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt20 c-flex">
        <div class="c-box-flex vh"></div>
        <el-pagination
          @size-change="setPageSize"
          @current-change="setPage"
          :current-page="currentPage"
          :page-sizes="[20, 200, 300, 400]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
        ></el-pagination>
      </div>

      <el-dialog title="订单详情" :visible.sync="dialogVisible" width="50%">
        <div ref="table">
          <el-table :data="orderList" style="width: 100%" max-height="600" border>
            <el-table-column prop="id" label="序号"></el-table-column>
            <el-table-column prop="code" label="账号/兑换码"></el-table-column>
            <el-table-column prop="pwd" label="密码"></el-table-column>
            <el-table-column prop="email" label="邮箱"></el-table-column>
            <el-table-column prop="epwd" label="邮箱密码"></el-table-column>
          </el-table>
        </div>
        <div class="mt20 c-flex">
          <div class="c-box-flex vh"></div>
          <el-pagination
            @current-change="orderSetPage"
            :current-page="orderCurrentPage"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="orderPageTotal"
            :default-time="['00:00:00', '23:59:59']"
          ></el-pagination>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      orderNumber: null,
      gameTerraceId: null,
      gameNameId: null,
      discountWay: null,
      paymentWay: null,
      userAccount: null,
      userPhone: null,
      supplierId: null,
      channelId: null,
      List: [],
      supplierList: [],
      gameTerraceList: [],
      discountWayList: ["无", "折扣", "满减", "优惠券"],
      dialogVisible: false,
      orderList: [],
      orderPageTotal: null,
      orderCurrentPage: 1,
      orderId: null,
      channelList: [],
      sourceList: [],

      //列表相关
      pageTotal: null,
      currentPage: 1,
      pageSize: 20,
      maxHeight: null,
      time: [],
      orderStateList: [
        { name: "待付款", id: "UNPAID" },
        { name: "已完成", id: "SUCCESS" }
      ],
      orderState: null
    };
  },
  mounted() {
    this.maxHeight = window.innerHeight - this.$refs.table.offsetTop - 100;
    this.getList(this.currentPage, this.pageSize);
    this.getsupplierId(3, "supplierList"); //供应商
    this.getsupplierId(42, "channelList"); //渠道
    this.getsupplierId(70, "sourceList"); //来源
  },

  methods: {
    getList(currentPage, pageSize) {
      this.$axios
        .get("/spOrderRecord/spOrderRecordList", {
          params: {
            pageNum: currentPage,
            pageSize: pageSize,
            orderType: "SPEED",
            gameNameId: this.gameNameId,
            paymentWay: this.paymentWay,
            userAccount: this.userAccount,
            userPhone: this.userPhone,
            supplierId: this.supplierId,
            channelId: this.channelId,
            orderState: this.orderState,
            startTime:
              JSON.stringify(this.time) != "[]" && this.time
                ? this.$format(this.time[0])
                : "",
            endTime:
              JSON.stringify(this.time) != "[]" && this.time
                ? this.$format(this.time[1])
                : ""
          }
        })
        .then(res => {
          if ((res.data.code = 200)) {
            this.List = res.data.data.list;
            this.pageTotal = res.data.data.total;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    getsupplierId(id, name) {
      //供应商
      this.$axios
        .get("/shop/classify/classifyMenuList", {
          params: {
            id: id
          }
        })
        .then(res => {
          if ((res.data.code = 200)) {
            this[name] = res.data.data;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //分页
    setPage(currentPage) {
      this.currentPage = currentPage;
      this.$nextTick(() => {
        this.getList(this.currentPage, this.pageSize);
      });
    },
    //分页大小
    setPageSize(v) {
      this.currentPage = 1;
      this.pageSize = v;
      this.$nextTick(() => {
        this.getList(this.currentPage, this.pageSize);
      });
    },
    //搜索
    search() {
      this.currentPage = 1;
      this.$nextTick(() => {
        this.getList(this.currentPage, this.pageSize);
      });
    },
    orderSetPage(orderCurrentPage) {
      this.orderCurrentPage = orderCurrentPage;
      this.$nextTick(() => {
        this.getOrderList(this.orderCurrentPage, 10, this.orderId);
      });
    },

    setId(id) {
      this.orderId = id;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.getOrderList(this.orderCurrentPage, 10, this.orderId);
      });
    },
    getOrderList(currentPage, pageSize, id) {
      this.$axios
        .get("/spOrderRecord/orderRecordDetailList", {
          params: {
            pageNum: currentPage,
            pageSize: pageSize,
            id: id
          }
        })
        .then(res => {
          if ((res.data.code = 200)) {
            this.orderList = res.data.data.list;
            this.orderPageTotal = res.data.data.total;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    reset() {
      this.orderState = null;
      this.userAccount = null;
      this.userPhone = null;
      this.gameNameId = null;
      this.paymentWay = null;
      this.time = [];
      this.channelId = null;
      (this.supplierId = null), (this.currentPage = 1);
      this.$nextTick(() => {
        this.getList(this.currentPage, this.pageSize);
      });
    }
  }
};
</script>
<style lang="less" scoped>
.tab-wrap {
  border: 1px solid #ddd;
  border-radius: 10px 10px 0 0;
  border-bottom: none;
  .cell {
    padding: 10px 25px;
    &.br {
      border-right: 1px solid #ddd;
    }
    &.active {
      color: #409eff;
    }
  }
}
</style>
